<template>
  <div id="app">
    <section id="cart_goods" class="container" style="flex: 1;">
      <div class="cart_nav">
        <h2>购物车</h2>
      </div>
      <div class="cart">
        <div class="full_shopcart" v-show="isfull">
          <div class="full_nav">
            <div class="row">
              <div class="col-md-7 car-menu" style="text-align: left; ">
                <span style="margin-left: 50px;">商品信息</span>
              </div>
              <div class="col-md-1 car-menu">单价</div>
              <div class="col-md-1 car-menu">数量</div>
              <div class="col-md-1 car-menu" style="text-align: center;">
                金额
              </div>
              <div class="col-md-2 car-menu" style="text-align: center;">
                操作
              </div>
            </div>
          </div>
          <div class="shopping_info">
            <div>
              <div
                class="item row"
                v-for="(item, index) in list"
                :key="item.cart_id"
              >
                <div class="col-7 car-goods-info">
                  <div class="img"><img :src="item.goods_small_logo" /></div>
                  <div class="name">{{ item.goods_name.slice(0, 18) }}...</div>
                </div>
                <div class="a_price col-1">￥{{ item.goods_price }}</div>
                <div class="change col-1">
                  <i
                    class="iconfont icon-shrink-s"
                    @click="sub(item.cart_id, item.num, index)"
                  ></i>
                  <span>{{ item.num }}</span>
                  <i
                    class="iconfont icon-unfolded-s"
                    @click="add(item.cart_id, item.num, index)"
                  ></i>
                </div>
                <div class="allprice col-1">
                  ￥<span>{{ item.goods_price * item.num }}</span>
                </div>
                <div class="del col-2">
                  <i
                    class="iconfont icon-cross"
                    @click="deleteCart(index, item.cart_id)"
                  ></i>
                </div>
              </div>
            </div>
            <div class="total">
              <button @click="playcat()">结算</button>
              <span class="smoney"
                >应付总额：￥<i>{{ total }}</i></span
              >
              <span class="snum"
                >共计 <i>{{ totalnum }}</i> 件商品</span
              >
            </div>
          </div>
        </div>
        <div class="null_shopcart" v-show="isnull">
          <div class="img">
            <img src="../../../public/images/cart-empty_@2x.png" />
          </div>
          <p>你的购物车空空如也</p>
          <div class="toshop">
            <router-link :to="{ path: '/home' }">
              <input type="button" value="现在选购" />
            </router-link>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      isfull: true,
      isnull: false,
      orderDetail: {
        item_id: 0,
        order_code: "",
        item_num: 0,
        item_title: "",
        item_price: 0,
        total: 0,
        item_image: "",
      },
      orders: {
        order_code: "",
        payment_money: 0,
        status: 2,
      },
      menberID: "",
    };
  },
  created() {
    this.getdata();
    this.menberID = window.sessionStorage.getItem("id");
  },
  computed: {
    //计数商品总数
    totalnum: function() {
      var n = 0;
      this.list.forEach((item) => {
        n += item.num;
      });
      return n;
    },
    //计算商品总金额
    total: function() {
      var t = 0;
      this.list.forEach((item) => {
        t += item.goods_price * item.num;
      });
      return t;
    },
  },
  methods: {
    //获取数据
    getdata() {
      this.$axios.get("http://localhost:8080/mall/goods/showCart").then(
        function(ret) {
          this.list = ret.data.message.message;
          console.log(this.list);
          if (this.list.length <= 0) {
            this.isfull = !this.isfull;
            this.isnull = !this.isnull;
          }
        }.bind(this)
      );
    },
    //删除购物车商品
    deleteCart: function(index, cart_id) {
      this.list.splice(index, 1);
      this.$axios
        .get("http://localhost:8080/mall/goods/deleteCartGoods", {
          params: {
            cart_id: cart_id,
          },
        })
        .then((ret) => {
          if (ret.status == 200) {
            if (this.list.length <= 0) {
              this.isfull = !this.isfull;
              this.isnull = !this.isnull;
            }
            console.log("xxxxxxxxxxxxxx");
          }
        });
    },
    deleteCartAll: function(cart_id) {
      this.$axios
        .get("http://localhost:8080/mall/goods/deleteCartGoods", {
          params: {
            cart_id: cart_id,
          },
        })
        .then((ret) => {
          if (ret.status == 200) {
            if (this.list.length <= 0) {
              this.isfull = !this.isfull;
              this.isnull = !this.isnull;
            }
            console.log("xxxxxxxxxxxxxx");
          }
        });
    },
    //增加商品数量
    add: function(id, num, index) {
      if (num < 99) {
        num += 1;
        this.list[index].num = num;
        this.$axios
          .get("http://localhost:8080/mall/goods/addCartNum", {
            params: {
              cart_id: id,
              num: num,
            },
          })
          .then(function(ret) {
            if (ret.status == 200) {
              console.log("xxxxxxxxxxxxxx 数量加一");
            }
          });
      }
    },
    //减少商品数量
    sub: function(id, num, index) {
      if (num > 1) {
        num -= 1;
        this.list[index].num = num;
        this.$axios
          .get("http://localhost:8080/mall/goods/addCartNum", {
            params: {
              cart_id: id,
              num: num,
            },
          })
          .then(function(ret) {
            if (ret.status == 200) {
              console.log("xxxxxxxxxxxxxx 数量减一");
            }
          });
      }
    },
    //生成订单
    playcat: function() {
      this.createOrderCode();
      this.list.forEach((item) => {
        //把购物车数据作为订单详情信息
        this.orderDetail.item_id = item.goods_id;
        this.orderDetail.item_num = item.num;
        this.orderDetail.item_title = item.goods_name;
        this.orderDetail.item_price = item.goods_price;
        this.orderDetail.total = item.num * item.goods_price;
        this.orderDetail.item_image = item.goods_small_logo;
        // 生成订单详情数据
        const res1 = this.$axios
          .get("http://localhost:8080/mall/orders/createOrderDetail", {
            params: {
              item_id: this.orderDetail.item_id,
              order_code: this.orderDetail.order_code,
              item_num: this.orderDetail.item_num,
              item_title: this.orderDetail.item_title,
              item_price: this.orderDetail.item_price,
              total: this.orderDetail.total,
              item_image: this.orderDetail.item_image,
            },
          })
          .then(function(ret) {
            if (ret.status == 200) {
              console.log("生成订单详情数据成功");
            }
          });

        //生成订单信息
        this.orders.payment_money = this.total;
        this.deleteCartAll(item.cart_id);
      });
      const res2 = this.$axios
        .get("http://localhost:8080/mall/orders/createOrder", {
          params: {
            order_code: this.orders.order_code,
            payment_money: this.orders.payment_money,
            flag: 0,
            member_id: this.menberID,
            status: 1,
          },
        })
        .then(function(ret) {
          if (ret.status == 200) {
            console.log("生成订单信息成功!!");
          }
        });

      let that = this;
      setTimeout(function() {
        that.$router.push({
          path: "/orderfirst",
          query: {
            order_code: that.orders.order_code,
          },
        });
      }, 50);
    },
    //随机生成订单号
    createOrderCode() {
      let random_no = "";
      for (
        let i = 0;
        i < 3;
        i++ //j位随机数，用以加在时间戳后面。
      ) {
        random_no += Math.floor(Math.random() * 10);
      }
      random_no = new Date().getTime() + random_no;
      this.orderDetail.order_code = random_no;
      this.orders.order_code = random_no;
    },
  },
};
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

#cart_goods {
  margin-top: 120px;
  flex: 1;

  .cart_nav {
    padding-left: 30px;
    height: 60px;
    padding: 0 10px 0 24px;
    border-bottom: 1px solid #d4d4d4;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.06);
    background: #f3f3f3;
    background: linear-gradient(#fbfbfb, #ececec);
    line-height: 60px;
    font-size: 18px;
    color: #333;

    h2 {
      height: 60px;
      line-height: 60px;
      font-size: 18px;
    }
  }

  .null_shopcart {
    // display: none;
    background-color: #fff;
    width: 100%;
    padding: 50px;
    border-radius: 0px 0px 8px 8px;

    .img {
      width: 300px;
      margin: 0 auto;
    }

    p {
      padding-top: 20px;
      text-align: center;
      color: rgb(141, 141, 141);
    }

    .toshop {
      text-align: center;

      a > input {
        width: 150px;
        height: 40px;
        line-height: 38px;
        color: rgb(141, 141, 141);
        border: 1px solid #e1e1e1;
        border-radius: 4px;
        font-size: 12px;
        color: #646464;
        background-color: #f9f9f9;
        background-image: linear-gradient(180deg, #fff, #f9f9f9);
      }
    }
  }

  .full_shopcart {
    // display: none;
    background-color: #fff;

    .full_nav {
      line-height: 38px;
      height: 38px;
      padding: 0 0 0 30px;
      font-size: 12px;
      background: #eee;
      border-bottom: 1px solid #dbdbdb;
      border-left: 1px solid #dbdbdb;
      border-right: 1px solid #dbdbdb;
      border-bottom-color: rgba(0, 0, 0, 0.08);
    }

    .shopping_info {
      .item {
        height: 140px;
        line-height: 140px;
      }

      .car-goods-info {
        display: flex;
        padding-left: 50px;

        .img {
          padding-left: 40px;

          img {
            width: 80px;
            height: 80px;
            // border: #000000 solid 1px;
          }
        }

        .name {
          padding-left: 60px;
        }
      }

      .change {
        padding-left: 0px;
        padding-right: 0px;
        display: flex;

        span {
          width: 40px;
          height: 40px;
          text-align: center;
          border: none;
        }

        i:hover {
          color: #0069d9;
        }
      }

      .allprice {
        text-align: center;
      }

      .del {
        text-align: center;

        i {
          font-size: 20px;

          &:hover {
            color: #0069d9;
          }
        }
      }

      .total {
        height: 90px;
        width: 100%;
        background: linear-gradient(#fdfdfd, #f9f9f9);
        border-top: 1px solid #e9e9e9;
        box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.04);
        line-height: 90px;
        padding-right: 60px;

        .snum {
          float: right;
          padding: 0 20px;
          font-size: 18px;

          i {
            font-size: 24px;
            font-weight: bold;
            font-style: normal;
            color: #cc2239;
          }
        }

        .smoney {
          float: right;
          font-size: 18px;
          border-left: 1px solid #e1e1e1;
          padding: 0 40px;

          i {
            font-size: 24px;
            font-weight: bold;
            font-style: normal;
            color: #cc2239;
          }
        }

        button {
          float: right;
          margin-top: 20px;
          width: 130px;
          height: 50px;
          line-height: 50px;
          font-size: 16px;
          border: 1px solid #5c81e3;
          border-radius: 4px;
          font-size: 12px;
          color: #fff;
          background-color: #678ee7;
          background-image: linear-gradient(180deg, #678ee7, #5078df);

          &:hover {
            background-image: linear-gradient(180deg, #6a94ee, #304886);
          }
        }
      }
    }
  }
}
</style>
